<template>
  <Modal
    title="快速创建Crud"
    :width="modalWidth"
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    okText="确认创建"
    cancelText="取消"
    :bodyStyle="{ padding: ' 16px 16px' }"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div class="crud-form">
      <Base
        ref="base"
        :config="config"
        :currentAppKey="appKey"
        @titleEnter="onTitleEnter"
        @appkeyChange="onAppkeyChange"
      />
      <ClassConfig
        ref="classConfig"
        :currentAppKey="appKey"
        :config="config"
        @className="onClassNameChange"
      />

      <Table ref="table" :config="config" />
    </div>
  </Modal>
</template>

<script>
import { Modal, message } from "ant-design-vue";
import ClassConfig from "./ClassConfig";
import Table from "./Table";
import Base from "./Base";
// import { treeTransArray } from "../../utils/utils";
import { createCrud } from "@/api/app";

export default {
  components: {
    Modal,
    ClassConfig,
    Table,
    Base
  },
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    currentAppKey: String,
    success: Function,
    cancel: Function,
    clientWidth: Number
  },
  data() {
    return {
      visible: false,
      loading: false,
      appKey: "",
      modalWidth: 1200
    };
  },
  computed: {
    // namespace() {
    //   const { appKey } = this;
    //   if (this.config && this.config.apps) {
    //     const list = treeTransArray(this.config.apps, "items");
    //     let appFind = "";
    //     if (appKey.indexOf("_") > -1) {
    //       const keyArr = appKey.split("_");
    //       const lastKey = keyArr[keyArr.length - 1];
    //       appFind = list.find(p => p.folder === lastKey);
    //     } else if (appKey) {
    //       appFind = list.find(p => p.folder === appKey);
    //     }
    //     if (appFind && appFind.folder) {
    //       return appFind.path;
    //     }
    //   }
    //   return "app\\controller";
    // },
    // namespacePath() {
    //   const arr = this.namespace
    //     .split("\\")
    //     .filter(p => !["app", "controller"].includes(p));
    //   const namespacePath = arr.join("/");
    //   return namespacePath;
    // }
  },
  created() {
    this.appKey = this.currentAppKey;
    if (this.clientWidth < 1200) {
      this.modalWidth = "95%";
    }
  },
  mounted() {
    this.visible = true;
  },
  methods: {
    handleCancel() {
      this.$emit("cancel");
      this.visible = false;
    },
    handleOk() {
      const baseData = this.$refs.base.getData();
      const classConfig = this.$refs.classConfig.getData();
      const tableData = this.$refs.table.getData();

      if (!classConfig || !tableData) {
        return false;
      }

      classConfig.model.table = tableData;
      const json = {
        ...baseData,
        ...classConfig,
        appKey: this.appKey
      };
      createCrud(json)
        .then(() => {
          message.success("创建成功");
          this.$emit("success");
          this.handleCancel();
        })
        .catch(() => {});
    },
    onClassNameChange(name) {
      this.$refs.service.setClassName(name);
      this.$refs.model.setClassName(name);
    },
    onTitleEnter() {
      this.$refs.classConfig.focus();
    },
    onAppkeyChange(val) {
      this.appKey = val;
    }
  }
};
</script>

<style lang="less" scoped></style>
